<template>
  <div ref="pieChartRef" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const pieChartRef = ref(null)
let chartInstance = null

// 初始化图表数据
const initChart = () => {
  const chart = echarts.init(pieChartRef.value)
  
  const option = {
    title: {
      text: '技术文章分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '文章分类',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '前端' },
          { value: 735, name: '后端' },
          { value: 580, name: 'Android' },
          { value: 484, name: 'iOS' },
          { value: 300, name: '人工智能' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  chart.setOption(option)
  chartInstance = chart
}

// 监听窗口大小变化
const handleResize = () => {
  chartInstance?.resize()
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  chartInstance?.dispose()
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
}
</style> 